<template>
  <div class="alarm_attack">
    <div class="alarm_attack_describe">
      <div class="describe">工控安全告警</div>
<!--      <div class="buttonGroup">-->
<!--        <buttonGroup-->
<!--          @getTodayData="getAlarmTodayData"-->
<!--          @getWeekData="getAlarmWeekData"-->
<!--          @getHistoryData="getAlarmHistoryData"-->
<!--        ></buttonGroup>-->
<!--      </div>-->
    </div>
    <div id="alarmChart"></div>
    <div class="alarm_attack_describe">
      <div class="describe">攻击事件类型</div>
<!--      <div class="buttonGroup">-->
<!--        <buttonGroup-->
<!--            @getTodayData="getAttackTodayData"-->
<!--            @getWeekData="getAttackWeekData"-->
<!--            @getHistoryData="getAttackHistoryData"-->
<!--        ></buttonGroup>-->
<!--      </div>-->
    </div>
    <div class="attack_event" v-if="attackEventList.length > 0">
      <div class="attack_event_content">
        <div class="icon_temperature"></div>
        <div class="icon_content">
          <div class="content_name">{{ attackEventList[0].key}}</div>
          <div class="content_value" style="color: #FF9E3D;font-weight: bold">{{ attackEventList[0].value}}件</div>
        </div>
      </div>
      <div class="attack_event_content">
        <div class="icon_humidity"></div>
        <div class="icon_content">
          <div class="content_name">{{ attackEventList[1].key}}</div>
          <div   style="color:#00F9FF;font-weight: bold;">{{ attackEventList[1].value}}件</div>
        </div>
      </div>
      <div class="attack_event_content">
        <div class="icon_co2"></div>
        <div class="icon_content">
          <div class="content_name">{{ attackEventList[2].key}}</div>
          <div class="content_value" style="color: #00FFA8;font-weight: bold">{{ attackEventList[2].value}}件</div>
        </div>
      </div>
    </div>

    <div class="desc" v-if="industrialEventCount!=null">
      <div class="desc_num">{{ industrialEventCount }}</div>
      <div class="desc_title">总数</div>
    </div>

  </div>

</template>

<script>
import * as echarts from 'echarts'
// import buttonGroup from '@/views/bigScreen/components/button_group'
import {
  riskIndustrialEventCount,
  riskAttackEventCount
} from "@/api/bigSreen";
export default {
  name: "alarm_attack",
  components: {
    // buttonGroup
  },
  data() {
    return {
      aButtonActive: '1',
      bButtonActive: '1',
      alarmChart: null,
      industrialEventList: [],
      industrialEventCount: null,
      attackEventList: [],
    }
  },
  created() {
    // this.$nextTick(() => {
    //   this.getData();
    // })
  },
  methods: {
    getData(){
      this.getAlarmTodayData();
      this.getAttackTodayData();
    },
    getAlarmTodayData(){
      this.riskIndustrialEventCount()
    },
    // getAlarmWeekData(){
    //   this.riskIndustrialEventCount()
    // },
    // getAlarmHistoryData(){
    //   this.riskIndustrialEventCount()
    // },
    getAttackTodayData(){
      this.riskAttackEventCount()
    },
    // getAttackWeekData(){
    //   this.riskAttackEventCount()
    // },
    // getAttackHistoryData(){
    //   this.riskAttackEventCount()
    // },
    initAlarmChart(){
      this.alarmChart = echarts.init(document.getElementById('alarmChart'));
      this.alarmChart.setOption({
        color: ['#C7E8FF','#A4DAFF','#87CAFF','#64BBFF','#35A9FF','#4193FF','#3D70EE'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '10',
          top: '10',
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 5,
          textStyle: {
            color: '#FFF'
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['40%','60%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              formatter: function (params){
                return params.data.value
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#0e2245',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            data: this.industrialEventList
          }
        ]
      },true)
    },
    async riskIndustrialEventCount() {
      try {
        const res = await riskIndustrialEventCount({
          limit: 100,
          score: 1
        })
        this.industrialEventCount = 0;
        this.industrialEventList = res.data.data.unhandled.values.map(item => {
          this.industrialEventCount += item.value
          return {
            ...item,
            name: item.key
          }
        })
        this.initAlarmChart();
      } catch (e) {
        console.log(e)
      }
    },
    async riskAttackEventCount() {
      try {
        const res = await riskAttackEventCount({
          limit: 100,
          score: 1
        })
        this.attackEventList = res.data.data.unhandled.values
      } catch (e) {
        console.log(e)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.alarm_attack {
  width: 100%;
  height: 100%;
  padding-top: 4%;
  position: relative;

  .alarm_attack_describe {
    width: 100%;
    height: 8%;
    display: flex;
    .describe {
      font-size: 14px;
      margin-left: 20px;
      padding-top: 1.5%;
      width: 62%;
      height: 100%;
    }
    .buttonGroup {
      width: 30%;
      height: 100%;
    }
  }

  #alarmChart {
    width: 100%;
    height: 58%;
  }

  .attack_event {
    margin-top: 2%;
    margin-left: 4.5%;
    height: 18%;
    width: 90%;
    background-image: url("~@/assets/img/bigScreen/attack_event_bg.svg");
    background-size: 100% 100%;
    display: flex;
    .attack_event_content {
      width: 33.33%;
      height: 100%;
      display: flex;
      .icon_temperature {
        width: 25%;
        height: 100%;
        background-image: url("~@/assets/img/bigScreen/icon_temperature.svg");
        background-size: 100% 100%;
      }

      .icon_humidity {
        width: 25%;
        height: 100%;
        background-image: url("~@/assets/img/bigScreen/icon_humidity.svg");
        background-size: 100% 100%;
      }

      .icon_co2 {
        width: 25%;
        height: 100%;
        background-image: url("~@/assets/img/bigScreen/icon_co2.svg");
        background-size: 100% 100%;
      }

      .icon_content {
        margin-left: 6%;
        margin-top: 10%;
        .content_name {
          font-size: 12px;
        }
        .content_value {
          font-size: 14px;
        }
      }
    }
  }

  .desc {
    position: absolute;
    top: 36%;
    left: 30%;
    width: 20%;
    height: 10%;
    text-align: center;

    .desc_num {
      font-size: 22px;
    }

    .desc_title {
      margin-top: 5px;
      font-size: 16px;
      color: #88D6FF;
      opacity: 0.8;
    }
  }
}

</style>
